<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      :error.sync="error"
      error-text="请求失败，点击重新加载"
      @load="onLoad"
    >
      <ArticleItem
        v-for="(item, index) in list"
        :key="index"
        :comments="item"
        @comment-like="item.is_liking"
      />
    </van-list>
  </div>
</template>

<script>
import ArticleItem from '@/components/article/article-item'
import { getComment } from '@/api/comment.js'

export default {
  name: 'ArticleComment',
  components: { ArticleItem },
  props: {
    // 文章ID
    articleId: {
      type: [Number, Object, String],
      required: true
    },
    list: {
      type: Array,
      // default:function(){
      //   return []
      // }
      default: () => []
    }
  },
  data() {
    return {
      // list: [],
      loading: false, // 加载中状态
      finished: false, // 是否加载完成
      offset: null, // 页码
      limit: 10, // 获取评论的个数
      error: false // 错误状态
    }
  },
  methods: {
    async onLoad() {
      try {
        // 1.发起请求
        const { data } = await getComment({
          type: 'a', // 评论类型 a：文章的评论 c：评论的回复
          source: this.articleId, // 文章的ID或者评论ID
          offset: this.offset, // 评论数据的偏移量,下一次请求的页码
          limit: this.limit // 获取评论的个数
        })

        // 2.数据绑定模板
        const { results } = data.data
        this.list.push(...results) // 将数据展开一条一条添加进list数组
        this.$emit('comment-data', data.data) // 自定义事件,将data.data传进父组件,以便父组件改变评论数量

        // 3.将loading设置关闭
        this.loading = false

        // 模拟错误状态
        // if (Math.random() > 0.5) {
        //   JSON.parse('0000000000')
        // }

        // 4.判断是否还有数据
        if (results.length) {
          this.offset = data.data.last_id // 有，则更新页码
        } else {
          this.finished = true // 没有，将finished设置为true
        }
      } catch (error) {
        console.log(error)
        this.finished = true // 报错情况下也将finished状态设置为true
        this.$toast.fail('获取评论失败,请重试')
        this.error = true // 开启错误状态
      }
    }
  },
  created() {
    this.onLoad() // 在一开始就请求获取评论,以便获取评论数量
  },
  computed: {}
}
</script>

<style lang="less" scoped></style>
